<template>
  <div class="container">
    <h2>用户注册</h2>
    <form @submit.prevent="register">
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" v-model="user.username" class="form-control" id="username" required>
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" v-model="user.password" class="form-control" id="password" required>
      </div>
      <div class="form-group">
        <label for="phone">手机号码</label>
        <input type="text" v-model="user.phone" class="form-control" id="phone" required>
      </div>
      <div class="form-group">
        <label for="email">电子邮箱</label>
        <input type="email" v-model="user.email" class="form-control" id="email">
      </div>
      <button type="submit" class="btn btn-primary">注册</button>
      <p v-if="error" class="text-danger">{{ error }}</p>
      <p v-if="message" class="text-success">{{ message }}</p>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        username: '',
        password: '',
        phone: '',
        email: ''
      },
      error: '',
      message: ''
    }
  },
  methods: {
    register() {
      // 这里需要调用后端API来发送注册请求，假设后端注册接口是 /api/register
      // 使用axios等HTTP请求库发送POST请求
      axios.post('/api/register', this.user)
      .then(response => {
          this.message = '注册成功';
          // 可以根据业务逻辑进行页面跳转等操作，比如跳转到登录页面
        })
      .catch(error => {
          this.error = '注册失败：' + error.response.data.message;
        });
    }
  }
}
</script>

<style scoped>
/* 可以添加组件内的局部样式 */
</style>